<template>
    <div id="cont" class="padding">
        <div>
           <div class="teachers deco">
                <p>负责人</p>
                <div>
                    <div class="t-item">
                        <div><img src="/static/images/profiles/C.webp" alt=""></div>
                        <div>蔡畅 副教授</div>
                        <div>加州大学旧金山分校</div>
                        <div>脑源活动成像和人工智能</div>
                    </div>
                </div>
           </div>
           <div class="students deco">
               <p>学生</p>
               <div>
                    <div class="t-item">
                        <div><img src="/static/images/profiles/G3.webp" alt=""></div>
                        <div>郭锦成 硕士</div>
                        <div>动态脑网络</div>
                    </div>
                    <div class="t-item">
                        <div><img src="/static/images/profiles/X.webp" alt=""></div>
                        <div>熊子卓 硕士</div>
                        <div>深度学习</div>
                    </div>
                    <div class="t-item">
                        <div><img src="/static/images/profiles/Q.webp" alt=""></div>
                        <div>齐鑫宝 硕士</div>
                        <div>贝叶斯方法</div>
                    </div>
                    <div class="t-item">
                        <div><img src="/static/images/profiles/L.webp" alt=""></div>
                        <div>龙源顺 硕士</div>
                        <div>脑电信号分析</div>
                    </div>
                    <div class="t-item">
                        <div><img src="/static/images/profiles/C.jpg" alt=""></div>
                        <div>蔡帆 硕士</div>
                        <div>贝叶斯方法</div>
                    </div>
                    <div class="t-item">
                        <div><img src="/static/images/profiles/W2.webp" alt=""></div>
                        <div>王佳惠 硕士</div>
                        <div>癫痫发作预测</div>
                    </div>
                    <div class="t-item">
                        <div><img src="/static/images/profiles/L3.jpg" alt=""></div>
                        <div>林俊 硕士</div>
                        <div>脑源活动成像</div>
                    </div>
                    <div class="t-item">
                        <div><img src="/static/images/profiles/K.webp" alt=""></div>
                        <div>柯河朋 硕士</div>
                        <div>脑区源活动成像</div>
                    </div>
                    <div class="t-item">
                        <div><img src="/static/images/profiles/M.webp" alt=""></div>
                        <div>马凯 硕士</div>
                        <div>癫痫病灶区成像</div>
                    </div>   
               </div>
           </div>
        </div>
    </div>
</template>

<script>
export default({
    name: 'team'
}) 
</script>

<style>
#cont{
    background-color:#f0f3f5;
}
#cont > div{
    background-color: white;
    padding:20px;
}
#cont .deco p{
    font-size:20px;
}
#cont .deco p::before{
    content:'';
    border: 2px solid #182C61;
    font-size:15px;
    margin-right:10px;
}

#cont .deco > div{
    display:flex;
    flex-wrap: wrap;
    justify-content: space-around;
}


.deco img{
    max-width:100px;
}

.deco .t-item{
    width: 200px;
    margin-right:20px;
    margin-top: 20px;
    margin-bottom:20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.deco .t-item > div:first-child{
    width:100px;
    height:100px;
    border-radius: 50%;
    border:2px black solid;
    overflow: hidden;
}
.t-item > div:nth-of-type(2){
    margin-top:5px;
}

.t-item > div {
    line-height:24px;
}

</style>